<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row type="flex" justify="space-between" align="middle">
      <el-col >
      <el-form :inline="true"  class="demo-form-inline" :model="formInline">
  <el-form-item label="标签名称" >
    <el-input v-model="formInline.tagName" ></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select placeholder="状态" v-model="formInline.state">
       <el-option label="已启用" :value="1"> </el-option>
      <el-option label="已禁用" :value="0"> </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
     <el-button @click="qingchu1">清除</el-button>
    <el-button type="primary" @click="changeState">查询</el-button>
  </el-form-item>
</el-form>
   </el-col >
       <el-row type="flex" justify="end">
         <el-button  icon="el-icon-edit" size="medium " type="success" @click="addbiao">新增标签</el-button>
      </el-row>
    </el-row>
     <div class="before">
    <i class="el-icon-info" />
 <span>共{{page.counts}}条记录</span>
    </div>
     <el-table border  :data="list1">
          <el-table-column label="序号" type="index"  width="80" />
          <el-table-column label="所属学科" prop="subjectName" width="130" />
          <el-table-column label="标签名称"  prop="tagName"  width="100" />
          <el-table-column label="创建者"   prop="username"  width="120"/>
          <el-table-column label="创建日期"    prop="addDate" >
            <template v-slot="{row}">
              {{ row.addDate |formatDate('yyyy-MM-dd hh:mm:ss') }}
            </template>
          </el-table-column>
          <el-table-column label="状态"  prop="state" width="80"  >
              <template v-slot="{row}">
                <span>{{row.state===1?"已启用":'已禁用'}}</span>
                  </template>
     </el-table-column>
          <el-table-column label="操作" >
              <template v-slot="{row}">
             <el-button type="text" size="small" @click="editState(row)">{{row.state === 1 ? '禁用' : '启用' }}</el-button>
              <el-button type="text" size="small" :disabled="row.state === 1"  @click="editRole(row)">修改</el-button>
              <el-button type="text" size="small"  :disabled="row.state === 1" @click="remove(row)">删除</el-button>
                 </template>
          </el-table-column>
     </el-table>
       <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :total="page.counts"
            :current-page="page.page"
            :page-size="page.pagesize"
          :page-sizes="[5, 10, 20, 50]"
            background
            layout="total,sizes,prev,pager,next,jumper"
        @current-change="changePage"
     @size-change="changesize"
          />
        </el-row>
      </el-card>
    <tagsadd   :showDialog.sync="showDialog"   :data1="form"/>
    </div>
  </div>
</template>

<script>
import { list, remove, detail, changeState } from '@/api/hmmm/tags'
import tagsadd from '@/module-hmmm/components/tags-add.vue'

export default {
  components: { tagsadd },
  data () {
    return {
      list1: [],
      page: {
        page: 1,
        pagesize: 10,
        counts: 0
      },
      showDialog: false,
      // 添加标签的表单值
      form: {
        tagName: '',
        subjectID: '',
        subjectName: ''
      },
      formInline: {
        tagName: '',
        state: ''
      },
      userId: this.$route.query
    }
  },
  created () {
    this.list()
  },
  methods: {
    addbiao () {
      this.showDialog = true
      this.form = {}
    },
    async list () {
      if (this.userId) {
        const res = await list({ ...this.page, subjectID: this.userId.id })
        this.list1 = res.data.items
        this.page.counts = res.data.counts
      } else {
        const res = await list(this.page)
        this.list1 = res.data.items
        this.page.counts = res.data.counts
      }
    },
    changesize (newSize) {
      this.page.pagesize = newSize
      // 参数最新的页码后，重新调用接口
      this.list()
    },
    // 控制页码的切换
    changePage (page) {
      // 参数path表示什么，最新的页码
      this.page.page = page
      // 参数最新的页码后，重新调用接口
      this.list()
    },
    // 删除
    remove (row) {
      this.$confirm('是否要删除').then(() => {
        return remove(row)
      }).then(() => {
        this.$message.success('删除成功')
        // 设置分页必须的业务
        if (this.list.length === 1 && this.page.page > 1) {
          this.page.page -= 1
        }
        this.list()
      })
    },
    // 修改
    async editRole (id) {
      const res = await detail(id)
      this.form = res.data
      this.showDialog = true
    },
    // 查询
    async  changeState () {
      const res = await list(this.formInline)
      this.list1 = res.data.items
    },
    // 清除
    qingchu1 () {
      this.formInline.tagName = ''
      this.formInline.state = ''
      this.list()
    },
    async editState (row) {
      console.log(row)
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
    }

  }
}
</script>

<style scoped>
.before{
  background-color:#f4f4f5 ;
  color: #909399;
}</style>
